<template>
  <div class="no-scrollbar mt-[70px]">
    <!-- 页面头部 -->
    <div class="w-full flex justify-center relative">
      <el-image class="w-[100%] md:h-[658px]" :src="bgImgPath?.bgImg27" lazy />
      <div
        class="w-full absolute top-1/2 left-1/2 md:left-1/3 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center p-4"
      >
        <div class="text-blue-600 text-center">
          <h1 class="text-3xl md:text-[85px] text-[#ff6839] font-bold mb-6">
            {{ contactConfig?.title }}
          </h1>
        </div>
      </div>
    </div>

    <!-- 联系方式 -->
    <section class="py-10 bg-white">
      <div class="container mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16">
          <!-- 联系信息 -->
          <div>
            <h2 class="text-3xl font-bold text-gray-800 mb-8">
              {{ contactConfig?.info.title }}
            </h2>

            <div class="space-y-8">
              <!-- 电话 -->
              <div class="flex items-start space-x-4">
                <div
                  class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0"
                >
                  <svg
                    class="w-6 h-6 text-blue-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                    />
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 mb-2">
                    {{ contactConfig?.info.phone.title }}
                  </h3>
                  <p
                    v-for="number in contactConfig?.info.phone.numbers"
                    :key="number"
                    class="text-gray-600"
                  >
                    {{ number }}
                  </p>
                </div>
              </div>
              <!-- 社交媒体 -->
              <div class="flex items-start space-x-4">
                <div
                  class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0"
                >
                  <svg
                    class="w-6 h-6 text-orange-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m0 0V3a1 1 0 011 1v10a1 1 0 01-1 1H8a1 1 0 01-1-1V4m0 0H5a1 1 0 00-1 1v10a1 1 0 001 1h2"
                    />
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 mb-2">
                    {{ contactConfig?.info.app.title }}
                  </h3>
                  <p
                    v-for="email in contactConfig?.info.app.numbers"
                    :key="email"
                    class="text-gray-600"
                  >
                    {{ email }}
                  </p>
                </div>
              </div>
              <!-- 邮箱 -->
              <div class="flex items-start space-x-4">
                <div
                  class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0"
                >
                  <svg
                    class="w-6 h-6 text-green-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                    />
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 mb-2">
                    {{ contactConfig?.info.email.title }}
                  </h3>
                  <p
                    v-for="email in contactConfig?.info.email.addresses"
                    :key="email"
                    class="text-gray-600"
                  >
                    {{ email }}
                  </p>
                </div>
              </div>

              <!-- 地址 -->
              <div class="flex items-start space-x-4">
                <div
                  class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0"
                >
                  <svg
                    class="w-6 h-6 text-purple-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                    />
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                    />
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 mb-2">
                    {{ contactConfig?.info.address.title }}
                  </h3>
                  <p
                    v-for="line in contactConfig?.info.address.lines"
                    :key="line"
                    class="text-gray-600"
                  >
                    {{ line }}
                  </p>
                </div>
              </div>
            </div>
          </div>

          <!-- 联系表单 -->
          <div class="bg-gray-50 p-4 rounded-2xl">
            <el-form
              ref="ruleFormRef"
              :rules="rules"
              :model="fromData"
              class="mt-4"
              label-position="left"
              label-width="auto"
            >
              <el-row :gutter="20">
                <el-col :xs="24" :md="12">
                  <el-form-item prop="username">
                    <el-input
                      v-model="fromData.username"
                      style="width: 100%"
                      :placeholder="contactConfig?.form.fields.name.placeholder"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :md="12">
                  <el-form-item prop="email">
                    <el-input
                      v-model="fromData.email"
                      style="width: 100%"
                      :placeholder="
                        contactConfig?.form.fields.email.placeholder
                      "
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :md="12">
                  <el-form-item prop="companyname">
                    <el-input
                      v-model="fromData.companyname"
                      style="width: 100%"
                      :placeholder="
                        contactConfig?.form.fields.company.placeholder
                      "
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :md="12">
                  <el-form-item prop="telephone">
                    <el-input
                      v-model="fromData.telephone"
                      style="width: 100%"
                      :placeholder="
                        contactConfig?.form.fields.phone.placeholder
                      "
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item prop="content">
                <el-input
                  v-model="fromData.content"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  type="textarea"
                  style="width: 100%"
                  :placeholder="contactConfig?.form.fields.message.placeholder"
                />
              </el-form-item>
              <el-button
                @click="submitForm"
                style="width: 100%"
                type="primary"
                >{{ contactConfig?.form.submitButton }}</el-button
              >
            </el-form>
          </div>
        </div>
      </div>
    </section>

    <!-- 地图位置 -->
    <section class="py-20 bg-gray-50">
      <div class="container mx-auto px-6">
        <div class="text-center mb-16">
          <h2 class="text-4xl font-bold text-gray-800 mb-4">
            {{ contactConfig?.location.title }}
          </h2>
          <p class="text-xl text-gray-600">
            {{ contactConfig?.location.subtitle }}
          </p>
        </div>

        <div class="bg-white rounded-2xl overflow-hidden shadow-lg">
          <div class="h-96 bg-gray-200 flex items-center justify-center">
            <div
              @click="toMap"
              :class="`w-full h-full cursor-pointer bgImgPath-img28  bg-cover bg-center bg-no-repeat`"
            >
              <!-- <el-image class="w-[100%] h-96" :src="bgImgPath?.bgImg28" lazy /> -->
              <!-- <svg
                class="w-16 h-16 mx-auto text-gray-400 mb-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                />
              </svg>
              <p class="text-gray-500">
                {{ contactConfig?.location.mapPlaceholder }}
              </p> -->
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted, ref, watch } from "vue";
import { useConfig } from "@/composables/useConfig";
import bgImgPath from "./bgImgPath/index";
import { postContactus } from "@/api/Join";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const currentLanguage = computed(() => locale.value);

const { getContactConfig, getCommonConfig } = useConfig();
const contactConfig = computed(() => getContactConfig());
const commonConfig = computed(() => getCommonConfig());
const ruleFormRef = ref<any>();

// 条状到地图
const toMap = () => {
  // const latitude = "22.4809";
  // const longitude = "114.1297";
  // // 构建高德地图URL并跳转
  // const amapUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:22.4809,114.1297;title:;addr:手帕口桥北铁路道口&referer=myapp`;

  // // 延迟跳转以便用户看到成功消息
  // setTimeout(() => {
  //   window.open(amapUrl, "_blank");
  // }, 800);
};
// 监听语言变化
watch(
  () => currentLanguage.value,
  () => {
    //请求成功 - 清空数据
    fromData.username = "";
    fromData.email = "";
    fromData.companyname = "";
    fromData.telephone = "";
    fromData.content = "";
    ruleFormRef.value.resetFields();
  }
);

const fromData = reactive({
  appkey: "e057f20f883e",
  language: "",
  username: "",
  email: "",
  companyname: "",
  telephone: "",
  content: "",
});
const validateUsername = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.name.placeholder));
  }
  {
    callback();
  }
};
const validateemail = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.email.placeholder));
  }
  {
    callback();
  }
};
const validateCompanyname = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.company.placeholder));
  }
  {
    callback();
  }
};
const validateTelephone = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.phone.placeholder));
  }
  {
    callback();
  }
};
const validateContent = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(contactConfig?.value.form.fields.message.placeholder));
  }
  {
    callback();
  }
};
const rules = ref({
  username: [
    {
      required: true,
      validator: validateUsername,
      trigger: "blur",
    },
  ],
  email: [
    {
      required: true,
      validator: validateemail,
      trigger: "blur",
    },
  ],
  companyname: [
    {
      required: true,
      validator: validateCompanyname,
      trigger: "blur",
    },
  ],
  telephone: [
    {
      required: true,
      validator: validateTelephone,
      trigger: "blur",
    },
  ],
  content: [
    {
      required: true,
      validator: validateContent,
      trigger: "blur",
    },
  ],
});
onMounted(() => {
  // loadConfig()
});

const submitForm = async () => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 处理表单提交逻辑
      postContactus({
        ...fromData,
        language: commonConfig.value.language,
      }).then((res: any) => {
        console.log(res);
        if (res.status === 100) {
          //请求成功 - 清空数据
          fromData.username = "";
          fromData.email = "";
          fromData.companyname = "";
          fromData.telephone = "";
          fromData.content = "";
          ruleFormRef.value.resetFields();
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.message);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style scoped>
/* 隐藏所有方向的滚动条 */
.no-scrollbar {
  /* width: 100vw;
  height: calc(100vh); */
  overflow-y: auto;
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}
.bgImgPath-img28 {
  background-image: url("@/assets/bgImg/bgImg28.jpeg");
}
</style>
